<template>
  <div class="personal">
    <router-link :to="{ path: `/editeInfo/${userInfo.id}` }">
      <div class="profile">
        <img :src="userInfo.head_img" alt />
        <div class="profile-center">
          <div class="name">
            <span
              class="iconfont"
              :class="userInfo.gender == 1 ? 'iconxingbienan' : 'iconxingbienv'"
            ></span
            >{{ userInfo.nickname || "粪斗吧少年" }}
          </div>
          <div class="time">2019-9-24</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <hmcell>
      <template #title>我的关注</template>
      <template #desc>关注的用户</template>
    </hmcell>
    <hmcell>
      <template #title>我的跟帖</template>
      <template #desc>跟帖/回复</template>
    </hmcell>
    <hmcell>
      <template #title>我的收藏</template>
      <template #desc>文章/视频</template>
    </hmcell>
    <hmcell>
      <template #title>设置</template>
    </hmcell>
    <hmbutton type="danger" class="center_button">退出</hmbutton>
  </div>
</template>

<script>
import hmcell from "../components/hmcell.vue";
import hmbutton from "../components/hmbutton.vue";
import { getUserInfo } from "../apis/user.js";
import axios from "../utils/myaxios.js";
export default {
  data() {
    return {
      userInfo: {},
      gender: 1,
    };
  },
  components: {
    hmcell,
    hmbutton,
  },
  mounted() {
    // console.log(JSON.parse(localStorage.getItem("heima_token")).user.id);
    getUserInfo(JSON.parse(localStorage.getItem("heima_token")).user.id)
      .then((res) => {
        // console.log(res);
        // console.log(123);
        this.userInfo = res.data.data;
        if (this.userInfo.head_img) {
          this.userInfo.head_img =
            axios.defaults.baseURL + this.userInfo.head_img;
        } else {
          this.userInfo.head_img = `http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg`;
        }
      })
      .catch((err) => {
        console.log(err);
        console.log(546);
      });
  },
  methods: {},
};
</script>
<style lang='less' scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
.center_button {
  margin: 10px auto;
}
</style>
